<template>
  <div>
    <div>
      <el-input placeholder="请输入员工名进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                clearable
                @clear="initEmpTrain"
                style="width: 350px;margin-right: 10px" v-model="keyword"
                @keydown.enter.native="initEmpTrain"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="initEmpTrain">
        搜索
      </el-button>
      <el-button icon="el-icon-search" type="primary" @click="showAddEmpEcDialogVisible = true">
        添加
      </el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="empTrains"
          style="width: 100%">
        <el-table-column
            prop="trainDate"
            label="培训日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="培训员工姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="trainContent"
            label="培训内容">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button @click="showEditEmpEcView(scope.row)" style="padding: 3px" size="small">编辑</el-button>
            <el-button @click="deleteEmpEc(scope.row)" style="padding: 3px" size="small" type="danger">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          title="奖惩记录"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form :model="editEmpTrain" :rules="rules" ref="editEmpTrainRef">
          <el-form-item label="培训内容:" prop="trainContent">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="editEmpTrain.trainContent"
                      placeholder="请输入培训内容"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="培训日期:" prop="trainDate">
            <el-date-picker
                v-model="editEmpTrain.trainDate"
                type="date"
                placeholder="请输入培训日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input size="small" style="width: 300px" prefix-icon="el-icon-edit" v-model="editEmpTrain.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editForm()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
          title="奖惩记录"
          :visible.sync="showAddEmpEcDialogVisible"
          width="40%"
          :before-close="handleClose">
        <el-form :model="empTrain" :rules="rules" ref="addEmpTrainRef">
          <el-form-item label="培训内容:" prop="trainContent">
            <el-input size="mini" style="width: 400px" prefix-icon="el-icon-edit" v-model="empTrain.trainContent"
                      placeholder="请输入培训内容"
                      type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="培训日期:" prop="trainDate">
            <el-date-picker
                v-model="empTrain.trainDate"
                type="date"
                placeholder="请输入培训日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input size="small" style="width: 300px" prefix-icon="el-icon-edit" v-model="empTrain.remark"
                      type="textarea"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="人员:" prop="eid">
            <el-select v-model="empTrain.eid" placeholder="人员" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in emps"
                  :key="item.id"
                  :label="item.workID+'-'+item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="showAddEmpEcDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addForm()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "PerTrain",
  data() {
    return {
      keyword: "",
      showAddEmpEcDialogVisible: false,
      empTrains: [],
      total: 0,
      page: 1,
      size: 10,
      dialogVisible: false,
      editEmpTrain: {
        trainDate: "",
        trainContent: "",
        remark: ""
      },
      empTrain: {
        eid: "",
        trainDate: "",
        trainContent: "",
        remark: ""
      },
      rules: {
        eid: [{required: true, message: '培训人员不能为空', trigger: 'blur'}],
        trainContent: [{required: true, message: '培训内容不能为空', trigger: 'blur'}]
      },
      emps: []

    }
  },
  mounted() {
    this.initEmpTrain();
    this.getRequest("/personnel/train/emps").then((resp) => {
      if (resp) {
        this.emps = resp;
      }
    })

  },
  methods: {
    initEmpTrain() {
      let url = '/personnel/train/?page=' + this.page + '&size=' + this.size + '&keyword=' + this.keyword;
      this.getRequest(url).then((resp) => {
        if (resp) {
          this.empTrains = resp.data;
          this.total = resp.total;
        }
      })
    },
    currentChange(currentPage) {
      this.page = currentPage;
      this.initEmpEc();
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initEmpEc();
    },
    showEditEmpEcView(empTrain) {
      this.dialogVisible = true;
      Object.assign(this.editEmpTrain, empTrain);
    },
    deleteEmpEc(data) {
      this.$confirm('此操作将永久删除【' + data.name + '的员工奖惩记录' + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/personnel/train/" + data.id).then(resp => {
          if (resp) {
            this.initEmpTrain();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.showAddEmpEcDialogVisible = false;
      this.resetForm();
    },
    editForm() {
      this.$refs['editEmpTrainRef'].validate(valid => {
        if (valid) {
          this.putRequest("/personnel/train/", this.editEmpTrain).then(resp => {
            if (resp) {
              this.dialogVisible = false;
              this.initEmpTrain();
            }
          })
        }
      });
    },
    addForm() {
      this.$refs['addEmpTrainRef'].validate(valid => {
        if (valid) {
          this.postRequest("/personnel/train/", this.empTrain).then(resp => {
            if (resp) {
              this.showAddEmpEcDialogVisible = false;
              this.initEmpTrain();
            }
          })
        }
      });
    },
    resetForm() {
      this.$refs['addEmpTrainRef'].resetFields();
      this.$refs['editEmpTrainRef'].resetFields();
    }
  }
}
</script>

<style scoped>

</style>